<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>01事件绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>角色名称 : {{name}}</h1>
        <h1>能力果实 : {{ability}}</h1>
        <!-- <button v-on:click="pirate">点击加入海贼团</button> -->
        <button @click="pirate">点击加入海贼团</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                name: '蒙奇.D.路飞',
                ability :'橡胶果实',
                accessories :'红发草帽'
            },
            methods:{
                pirate(){
                    alert(`欢迎来到东海!! 荣获*${this.accessories}*一个`);
                }
            }
        })
    </script>
</body>

</html>